<template>
<div>
    <h1>{{chaptername[chapter]}} - 知识点管理</h1>
    <div v-for="(entity, index) in entitylist" :key="index" class="entity-item">
      <span class="entity-name">{{entity}}</span>
      <el-icon :size="20" class="delete-icon" @click="deleteEntity(entity)"><DeleteFilled /></el-icon>
    </div>
    <div v-if="!isshow">
      <el-tooltip content="添加新知识点" placement="bottom" effect="light">
      <el-button class="add-button" @click="showinput" type="primary">+</el-button>
      </el-tooltip>
    </div>
    
    <div v-else class="input-content">
      <el-input
        v-model="newEntity.entityName"
        style="width: 250px;height: 40px;font-size: 20px;"
        placeholder="输入本章知识点"
      />
      <el-tooltip content="确认" placement="bottom" effect="light">
        <el-button style="margin-left: 30px;" type="primary" @click="addEntity"  circle>
          <el-icon style="font-size: 20px;"><Check /></el-icon>
        </el-button>
      </el-tooltip>
      <el-tooltip content="取消" placement="bottom" effect="light">
        <el-button  @click="unshowinput" circle>
          <el-icon style="font-size: 20px;"><Close /></el-icon>
        </el-button>
      </el-tooltip>
    </div>
</div>
</template>

<script>
import {deleteEntity , addEntity} from '@/api/entityapi'
export default {
    props: {
      chapter: {
        type: Number,
        required: true
      },
      entitylist: {
        type: Array,
        required: true
      }
    },
    data() {
        return {
          isshow: false,
          newEntity: {
            entityChapter: '',
            entityName: '',
          },  
          chaptername:['绪论','第一章','第二章','第三章','第四章','第五章','第六章','第七章','第八章','第九章','第十章','第十一章','第十二章','第十三章']
        }
    },
    methods: {
    async deleteEntity(entity) {
        try {
            const deleteResult = await deleteEntity(entity);
            this.$emit('changeentity'); // 触发父组件的事件
            console.log('删除结果:', deleteResult);
        } catch (error) {
            console.log(entity)
            console.error('删除失败:', error.message);
        }
    },
    async addEntity() {
        try {
            this.newEntity.entityChapter = this.chapter;
            console.log(this.newEntity);
            const addResult = await addEntity(this.newEntity);
            this.$emit('changeentity'); // 触发父组件的事件
            console.log('添加结果:', addResult);
        } catch (error) {
            console.error('添加失败:', error.message);
        }
    },
    showinput(){
      this.isshow = true;
    },
    unshowinput(){
      this.isshow = false;
    }
  }
}
</script>

<style scoped>
.entity-item {
  display: flex;
  justify-content: space-between; /* 将子元素两端对齐 */
  align-items: center; /* 垂直居中 */
  padding: 10px; /* 可选：增加一些内边距 */
  border-bottom: 1px solid #ccc; /* 添加底部边框 */
  margin-left: 40px;
  margin-right: 40px;
}
.entity-name{
  margin-left: 10px;
  font-size: 20px;
}
.delete-icon {
    margin-right: 10px;
    cursor: pointer; /* 鼠标悬浮时显示为手型 */
    transition: color 0.3s ease; /* 添加颜色过渡效果 */
}

.delete-icon:hover {
    color: rgb(255, 0, 0); /* 鼠标悬浮时变为红色 */
}

.add-button {
  font-size: 30px;
  margin-top: 50px;
}
.input-content{
  font-size: 30px;
  margin-top: 50px;
  margin-left: 32px;
  margin-right: 32px;
}
</style>